<template> <!-- vue实例外创建 -->
  <div>
    <!-- 添加区域 -->
    <el-button class="add" type="primary" @click="drawer = true">添加</el-button>
    <el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <el-form :rules="rules" ref="userref" :model="userform" label-width="80px">
        <el-form-item label="cat_name" prop="cat_name">
          <el-input v-model="userform.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="cat_pid" prop="cat_pid">
          <el-input v-model="userform.cat_pid"></el-input>
        </el-form-item>
        <el-form-item label="cat_level" prop="cat_level">
          <el-input v-model="userform.cat_level"></el-input>
        </el-form-item>
        <el-button class="add" type="primary" @click="adduserfun">确定</el-button>
      </el-form>
    </el-drawer>
    <!-- 查询区域 -->
    <el-input placeholder="请输入内容" v-model="id" class="input-with-select">
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
    <!-- 列表 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="cat_name"
        label="名字">
      </el-table-column>
      <el-table-column
        prop="cat_pid"
        label="cat_pid">
      </el-table-column>
      <el-table-column
        prop="cat_level"
        label="cat_level">
      </el-table-column>
    </el-table>
    </div>
</template>
<script>
import { GetCategories,AddCategories } from '@/api/user';
export default {
  data() {
    return {
      info:{
        cat_pid:0,
        cat_name:'',
        cat_level:0
      },
      tableData:[],
      defaultProps: {
          children: 'children',
          label:'authName'
        },
        userform: {},
      rules: {
        cat_level: [{ required: true, message: "请输入用户名", trigger: "change" },],
        cat_name: [{ required: true, message: "请输入密码", trigger: "blur" }],
        cat_pid: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      drawer:false,
      direction:'rtl',
      id:''
    }
    
  },
  methods:{
// 获取列表
async getdata() {
      let {data,meta} = await GetCategories(this.info)
      if (meta.status != 200) return this.$message.error(meta.msg)
      this.tableData = data
    console.log(data);
    
      // this.total = data.total
    },
    // 添加区域
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    // 确认添加
    adduserfun() {
      this.$refs['userref'].validate(async v => {
        if (v) {
          //发起添加请求
          let { data, meta } = await AddCategories(this.userform)
          if (meta.status != 201) return this.$message.error(meta.msg)
          this.$message.success(meta.msg)
          // 1.关闭窗口
          this.drawer = false
          // 2.更新页面
          this.getdata()
          // 3.清空数据
          this.userform = {}
          // this.$refs['userref'].resetFields();

        }
      })
    }
  },
  mounted() {
    this.getdata()
  }
}
</script>
<style scoped>
</style>